<template>
  <div class="user-wrapper">
    <h3 class="tl mb15">{{ title }}</h3>
    <el-form :model="form" label-width="80px" class="user-form">
      <el-form-item label="用户名:">
        <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input type="password" v-model="form.pwd" placeholder="请输入密码" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户类型:">
        <el-select v-model="form.type" placeholder="请选择用户类型">
          <el-option label="管理员" value="1"></el-option>
          <el-option label="普通用户" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户状态:">
        <el-select v-model="form.state" placeholder="请选择用户状态">
          <el-option label="可用" value="1"></el-option>
          <el-option label="不可用" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <p class="btn-area tr">
          <el-button type="warning" @click="cancel">取消</el-button>
          <el-button type="primary" @click="submmit">提交</el-button>
        </p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import request from 'request/index';
import { ElNotification } from 'element-plus';
import store from "store/index";

export default {
  name: 'user-add',
  setup () {
    const router = useRouter(),
      route = useRoute();

    const user = store.state.user;

    const editItem = route.params;
    const isEdit = route.params && route.params._id;
    const title = ref(isEdit ? '修改用户' : '新增用户');

    const form = reactive({
      name: editItem && editItem.name ? editItem.name : '',
      pwd: editItem && editItem.pwd ? editItem.pwd : '',
      state: editItem && editItem.state ? editItem.state : '',
      type: editItem && editItem.type ? editItem.type : '',
      email: editItem && editItem.email ? editItem.email : '',
      user: user.user.name
    });

    const cancel = () => {
      router.push({ name: 'userMng' });
    };

    const requestAdd = () => {
      request.post('/user/insert', form).then(data => {
        if (data.state == 200)        {
          ElNotification({
            message: '用户添加成功!',
            type: 'success'
          });
          cancel();
        } else        {
          ElNotification({
            message: '用户添加失败!',
            type: 'error'
          });
        }
      });
    };
    const requestEdit = () => {
      let params = Object.assign({}, form, { _id: editItem._id });

      request.post('/user/update', params).then(data => {
        if (data.state == 200)        {
          ElNotification({
            message: '用户修改成功!',
            type: 'success'
          });
          cancel();
        } else        {
          ElNotification({
            message: '用户修改失败!',
            type: 'error'
          });
        }
      });
    };

    const submmit = () => {
      isEdit ? requestEdit() : requestAdd();
    };

    return {
      title,
      form,
      cancel,
      submmit
    };
  }
};
</script>

<style scoped lang="scss">
.user-form {
  width: 550px;
  margin: 0 auto;
}
.user-form .el-form-item__content .el-select {
  width: 100%;
}
</style>
